<!DOCTYPE HTML>
<html>
<head>
    <!--定义html页面编码格式-->
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,height=device-height,target-density-dp=device-dpi,initial-scale=1,maximum-scale=1,user-scalable=no">
    <!--重定向 用于网址变更 下例 5秒后 页面跳到新地址-->
    <!--<meta http-equiv="refresh" content="5;url=https://www.baidu.com">-->
    <title>html5</title>
    <!--<base href="https://ss1.bdstatic.com/" target="_blank">-->
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
</head>
<body>
<div class="listItem">
    <p>常用标签</p>
    <!--abbr 缩写标签 鼠标移动到USA时  显示title值-->
    <abbr title="the united status of America"> USA</abbr><br>
    <!--address 标签-->
    <address>
        Address:纽约 帝国大厦<br>
        Phone:100<br>
    </address>

    <hr size="1" color="gray" width="100%">
    <!--article 标签-->
    <article>
        <a href="http://alibaba.com">alibaba 发布会</a>
        2012年12月31日,sdj;k;f;kkfnlvlsdkfejlmfc;sdd;lsakakld;kal;slf;'
    </article>
    <!--aside 标签-->
    <aside>
        <H4 align="center">纽约</H4>
        纽约式世界金融中心.......
    </aside>
    <hr size="1" color="gray" width="100%">

    <!--b标签  标记字体为粗体,用于突出字体-->
    I come from <b>China</b>,I love <b>China</b>.<br>

    <!--base标签 用于标记根地址，一般放在head标签的第一行-->
    <p>base标签，见head部分</p>
    <!--<img class="listIcon" src="70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1710418891,2621614720&fm=27&gp=0.jpg">-->

    <!--bdo 指定文本方向-->
    <bdo dir="ltr">left to right</bdo><br>
    <bdo dir="rtl">right to left</bdo><br>

    <!--块引用-->
    <blockquote>part 1:he comes back since.....</blockquote>

    <!--button标签
    autofocusNew="autofocus" //自动聚焦
    disabled="disabled"  //禁用按钮
    ....
    -->
    <button class="button" type="button" name="select">选择</button>

    <!--h5中 <center>标签已被弃用-->

    <hr size="1" color="gray" width="100%">
    <!--几种文字标记标签
      <em>   //呈现为被强调的文本
      <strong>  //定义重要文本
      <dfn>    //定义一个定义项目
      <code>   //定义计算机代码文本
      <samp>   //定义样本文本
      <kbd>    //定义键盘文本
      <var>     //定义变量
      <cite>    //定义引用
     -->
    <code class="code">
        @Override
        public void init() {
        fragments=new ArrayList<>();
        fragments.add(new TabFragment());
        mManager.beginTransaction()
        .add(R.id.fragment_container,fragments.get(0))
        .commit();
        }
    </code>

</div>

<div class="listItem">
    <!--col 定义列属性值  怎么都没用-->
    <p>col标签</p>
    <table class="form" align="center" border="1">
        <tr align="center" class="box">
            <td>星期</td>
            <td>上午</td>
            <td>下午</td>
            <td>花费</td>
        </tr>
        <tr align="center">
            <td>Monday</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>Tuesday</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>Wednesday</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>Thursday</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <td>Friday</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

<div class="listItem">
    <!--command标签 在谷歌中看不到效果；在android中也看不到效果-->
    <menu>
        <command type="command">Click</command>
    </menu>
    <!--dd标签  定义列表中项的描述 dl定义一个列表-->
    <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Juice</dt>
        <dt>Milk</dt>
        <dt>Tea</dt>
    </dl>
    <!--del定义文本中已删除的字段-->
    It`s time to fly,
    <del>or drink</del>
    .<br>

    <!--
    <details>
    -----用于描述文档的某个细节
    <summary> 定义<details>的标题
    -->
    <details>noted in 08.01 2013</details>

</div>

<div class="listItem">
    <!--嵌入标签 embed
    width  //
    height  //
    src   //嵌入文件
    type   //嵌入文件类型
    -->
    <embed src="../swf/3do.swf"/>

    <!--fieldset 用于表单元素分组 label （for属性 关联某个标签） （lagend定义fieldset的标题信息）-->
    <fieldset>
        <legend>normal info:</legend>
        <form>
            <label>height:<input type="text"></label><br>
            <label>weight:<input type="text"></label><br>
            <label>sex:<input type="text"></label><br>
        </form>
    </fieldset>

    <!--figure 标签 用于对元素进行组合 figcaption定义figure的标题-->
    <figure>
        <figcaption>USA</figcaption>
        <p>the United States of America ......</p>
    </figure>

    <!--footer 标签 用于指定页脚文档 header 指定文档页眉-->
    <header>chapter 1</header>
    <footer>made in China,08-29 2014</footer>

    <!--hgroup 对标题进行组合-->
    <hgroup>
        <H1>h1</H1>
        <H2>h1</H2>
    </hgroup>

    <!--i  斜体标签-->
    <i>我是中国人</i>


</div>

<div class="listItem">
    <!--设置图片区域点击事件
      》shape="circle"
      ---coords="50,50,50"  //前两个坐标为中心点 后一个为半径
      》shape="rect"
      ---coords="0,50,200，100"  //坐标分别为left\top\right\bottom
    -->
    <p>image</p>
    <img class="img" src="../img/avatar.jpg" alt="avatar" usemap="avatarMap">
    <map name="avatarMap" id="avatarMap">
        <area shape="circle" coords="50,50,50" href="https://www.baidu.com" target="_blank"
              alt="baidu">
        <area shape="circle" coords="150,50,50" href="https://www.tencent.com" target="_blank"
              alt="tencent">
        <area shape="rect" coords="0,50,200,100" href="https://www.software.com" target="_blank"
              alt="software">
    </map>

    <!--生成RSA密钥  keygen标签-->

    <!--link 定义两个文档之间的联系   如css文件导表 -->

    <!--mark标签 定义带记号的文本-->
    fetch me a
    <mark>book</mark>
    please !<br>

    <!--meta标签
    》提供有关页面的元素信息，比如针对搜索引擎和更新频度的描述和关键字
    》位于头部，不含任何显示内容。标签属性定义了与文本相关的名称和值对。
    》用途 重定向等
    -->

    <!--<meter> 定义度量衡，仅用于已知最大最小值的情况-->
    <meter value="5" min="0" max="10">6</meter>

    <!--<nav>
     》定义导航链接部分
     -->
    <nav>
        <a href="https://www.baidu.com">baidu</a>
        <a href="https://www.tencent.com">tencent</a>
        <a href="https://www.ifeng.com">ifeng</a>
    </nav>

    <!--<object>
    》定义一个嵌入对象
    》用在head或body中
    》至少使用data type属性之一
    》有些浏览器不支持此标签
    -->
</div>

<div onload="writeSum()" class="listItem">
    <!--<optgroup>
    》定义选项组，针对选项表较长时
    》可直接嵌在<form>下
    》<select> 建立下拉列表
    -->
    <select>
        <optgroup label="Fruit">
            <option label="apple">apple</option>
            <option label="pear">pear</option>
            <option label="strawberry">strawberry</option>
        </optgroup>
        <optgroup label="Color">
            <option label="red">red</option>
            <option label="blue">blue</option>
            <option label="yellow">yellow</option>
        </optgroup>
    </select>

    <!--<output>
    》定义不同类型的输出
    -->
    <form action="../asp/demo.asp" method="get" name="sumform">
        <output name="sum"/>
    </form>

</div>

<div class="listItem">
    <!--<param>
     》语序插入XMTML规定的run-time设置。即此标签可为包含它的<Object>标签提供参数
    -->
    <object name="slider" id="img">
        <param name="BorderStyle" value="1">
        <param name="MousePointer" value="0">
        <param name="Enable" value="1">
        <param name="Min" value="0">
        <param name="Max" value="10">
    </object>

    <!--<progress>
    》用来显示js中耗时操作的进度
    -->
    <progress>
        <span id="objprogress">76</span>%<br>
    </progress>

    <!--<q>
    》定义一个短的引用
    》cite定义引用来源
    》<blockquot> 标记长的引用
    -->
    <p>百度：
        <q cite="https://www.baidu.com">
            百度一下，你就知道了！
        </q>
    </p>

    <!--
    <rp>
    ----在<ruby>注释中用，定义不支持<ruby>元素浏览器所显示内容。
    ----ruby 注释的是中文注音或字符

    <rt>
    ----定义字符的解释或发音
    ----
    -->
    漢
    <rt>
        <rp>(</rp>
        ㄏㄢˋ
        <rp>)</rp>
    </rt>

    <!--<script> 定义脚本
    -->
</div>


<div class="listItem">
    <!--<section>
    》定义文档中的节(section \区段)。如章节、页眉、页脚或文档中的其他部分
    -->
    <section>
        <H2>USA</H2>
        <p>the united States of America</p>
    </section>

    <!--
    <small>定义更小字号文本
    <source>为<video>\<audio>等提供媒介资源
    ----media="media query"   //定义资源类型
    ----src   //指定资源
    ----type="numeric value"  //设置播放的播放起点位置
    <>
    -->

    <!--
    <span>  //对文档中的行内元素进行分组
    -->
    <p>chapter 1 <span style="color:#00ff00">chapter 2</span> chapter 3</p>

    <!--
    <strike> //定义加删除线的文本
    -->
    <p>chapter 1: <strike> I come back again !</strike></p>

    <!--
    <style>定义样式
    -->
    <!--
    <sup>  //定义上标文本
    <sub>  //定义下标文本
    -->
    text`s <sup>superscript</sup>
    text`s <sub>subscript</sub>

    <!--
    <tbody>
    ----定义一段表格主体
    ----与<thead>\<tfoot>  一起对表格的行进行分组
    -->

    <table>
        <thead>
        <tr>
            <td>head part:</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>body part:</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>foot part:</td>
        </tr>
        </tfoot>
    </table>


    <!--
    <time>   //定义时间或日期
    -->
    <time datetime="2018-04-01">愚人节</time>

    <!--
    <video> 视频标签
    -->
   <video src="../media/huoying.mp4" controls="controls">

   </video>

</div>


<div class="listItem">
    <!--内联标签iframe （与frame不同  前者只能用在body标签外，对整个网页进行规划
     而后者则用在body标签下）
     》一些老浏览器不支持此标签
     》发现在iframe之后的内容不显示

     ?如何让div内容可以滚动
     -->
    <iframe id="iframe" src="http://www.baidu.com"/>
</div>

</body>

<script type="text/javascript" src="../js/common.js"></script>
</html>